<template>
  <div>
    <el-input
      placeholder="请输入内容"
      @blur="search"
      v-model="input1"
    ></el-input>
    <!-- 表格 -->
    <el-table :data="orderslist" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="order_price" label="订单价格"> </el-table-column>
      <el-table-column prop="name" label="是否付款">
        <template slot-scope="scope">
          <el-button type="primary" plain v-if="scope.row.pay_status == 0"
            >已付款</el-button
          >
          <el-button type="danger" plain v-if="scope.row.pay_status == 1"
            >未付款</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货"> </el-table-column>
      <el-table-column label="下单时间">
        <template slot-scope="scope">
          {{ scope.row.create_time | timefilter }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="edit"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-location"
            @click="logistic(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 物流弹出 -->
    <el-dialog title="物流" :visible.sync="dialogVisible1" width="30%">
      <el-steps
        direction="vertical"
        :active="1"
        v-for="(item, index) in options"
        :key="index"
      >
        <el-step :title="item.context" :description="item.time"></el-step>
      </el-steps>
    </el-dialog>
    <!-- 编辑弹出框 -->
    <el-dialog title="修改地址" :visible.sync="dialogVisible" width="30%">
      省市区/县
      <el-cascader
        :options="cityOptions"
        @change="changeProvince"
        change-on-select
      >
      </el-cascader>
      <p>详细地址<el-input style="width: 300px"></el-input></p>

      <el-button type="primary">确定</el-button>
      <el-button>取消</el-button>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.pagenum"
      :page-sizes="[5, 10, 15, 40]"
      :page-size="pages.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { orders, logistics } from "../utils/api";
import cityOptions from "../desc/city_data2017_element";
export default {
  data() {
    return {
      // 物流信息
      options: [
        {
          time: "2018-05-10 09:39:00",
          ftime: "2018-05-10 09:39:00",
          context: "已签收,感谢使用顺丰,期待再次为您服务",
          location: "",
        },
        {
          time: "2018-05-10 08:23:00",
          ftime: "2018-05-10 08:23:00",
          context:
            "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
          location: "",
        },
        {
          time: "2018-05-10 07:32:00",
          ftime: "2018-05-10 07:32:00",
          context: "快件到达 [北京海淀育新小区营业点]",
          location: "",
        },
        {
          time: "2018-05-10 02:03:00",
          ftime: "2018-05-10 02:03:00",
          context:
            "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
          location: "",
        },
        {
          time: "2018-05-09 23:05:00",
          ftime: "2018-05-09 23:05:00",
          context: "快件到达 [北京顺义集散中心]",
          location: "",
        },
        {
          time: "2018-05-09 21:21:00",
          ftime: "2018-05-09 21:21:00",
          context: "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
          location: "",
        },
        {
          time: "2018-05-09 13:07:00",
          ftime: "2018-05-09 13:07:00",
          context: "顺丰速运 已收取快件",
          location: "",
        },
        {
          time: "2018-05-09 12:25:03",
          ftime: "2018-05-09 12:25:03",
          context: "卖家发货",
          location: "",
        },
        {
          time: "2018-05-09 12:22:24",
          ftime: "2018-05-09 12:22:24",
          context: "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
          location: "",
        },
        {
          time: "2018-05-08 21:36:04",
          ftime: "2018-05-08 21:36:04",
          context: "商品已经下单",
          location: "",
        },
      ],
      input1: "", //搜索框
      cityOptions: cityOptions,
      orderslist: [], //总数据
      dialogVisible: false, //编辑模态框
      dialogVisible1: false, //编辑模态框
      pages: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
    };
  },
  methods: {
    //搜索
    search() {
      this.orderslist = this.orderslist.filter((item) => {
        return item.order_price.toString().includes(this.input1);
      });
    },
    //级联
    handleChange(value) {
      console.log(value);
    },
    // 弹出编辑模态框
    edit() {
      this.dialogVisible = true;
    },

    changeProvince() {},
    // 物流
    logistic(row) {
      console.log(row);
      (this.dialogVisible1 = true), //物流模态框
        logistics(row.order_id).then((res) => {
          console.log(res);
        });
    },
    // 数据
    lists() {
      orders(this.pages).then((res) => {
        console.log(res);
        this.orderslist = res.data.data.goods;
        this.total = res.data.data.total;
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pages.pagesize = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.pages.pagenum = val;
      this.lists();
    },
  },
  created() {
    this.lists();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
  filters: {
    //时间过滤器
    timefilter(val) {
      let arr = new Date(val * 1000).toLocaleString();
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped></style>
